<script setup lang="ts">
	import { playListApi } from '@/api/peiwan'
	import { ref, watch } from 'vue'
	import { fullUrl, getPayPageUrl } from '@/utils/common'
	import { onShow, onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
	import { usePupupStore } from '@/stores'
	import { pageUrl } from '@/utils/constants'

	const queryList = (page : number, page_size : number) => {
		uni.showLoading({
			title: '数据加载中'
		});
		playListApi(page, page_size).then((res) => {
			uni.hideLoading(); // 关闭loading动画
			console.log('999999', res)
			res.result.data.map((item) => {
				console.log('888888', item);
			})
			const dataList = res.result.data;
			if (dataList.length == 0 && params.value.page == 1) {
				// console.log('首次加载没数据');
				noMore.value = false;
				list.value = [];
			} else if (dataList.length < 3 && params.value.page == 1) {
				// console.log('首次加载有数据，但少于4条');
				noMore.value = true;
				list.value = dataList;
			} else if (dataList.length !== 0 && params.value.page == 1) {
				//console.log('1111','首次加载有数据');
				noMore.value = false;
				list.value = dataList;
			} else if (dataList.length !== 0 && params.value.page > 1) {
				//console.log('2222','上拉加载更多数据');
				noMore.value = false;
				list.value = list.value.concat(dataList);
				console.log('66666', list.value);
			} else if (dataList.length == 0 && params.value.page > 1) {
				//console.log('上拉加载没有更多数据了');
				noMore.value = true;
			}
		})
	}
	const toDetail = (id) => {
		uni.navigateTo({
			url: pageUrl['dingdanDesc'] + '?id=' + id
		})
	}

	const noMore = ref(false)
	const isLoading = ref(false)
	const params = ref({ page: 1, pageSize: 10 })
	const list = ref([])
	console.log(params.value)
	onLoad(() => {
		queryList(params.value.page, params.value.pageSize)
	})

	onReachBottom(() => {
		if (!noMore.value) {
			params.value.page++;
			queryList(params.value.page, params.value.pageSize)
		}
	})

	onPullDownRefresh(() => {
		params.value.page = 1;
		queryList(params.value.page, params.value.pageSize); // 获取的数据列表
		uni.showToast({
			title: '刷新成功',
			icon: 'success',
			duration: 1000
		})
		uni.stopPullDownRefresh(); // 停止刷新
	})

	const backToTop = ref(true)
	watch(
		() => usePupupStore().showCancelPopup,
		(newVal) => {
			backToTop.value = !newVal
		},
		{ immediate: true },
	)
</script>
<template>
	<view style="padding:20rpx;">
		<view
			style="width:100%;background-color: #ffffff;border-radius: 20px;height:200px;padding:10px;margin:20px 0;overflow: hidden;"
			v-for="(item,index) in list" :key="index">
			<view
				style="width:100%;height:20px;display:flex;flex-wrap: wrap;color:#999;justify-content: space-between;">
				<text>{{item.create_time}}</text>
				<text>待接单</text>
			</view>
			<view style="display:flex;flex-wrap:wrap;width:100%;height:100px;margin-top:5px;">
				<image :src="fullUrl(item.detail[0].image)" mode="aspectFill" style="width:100px;height:100px;"></image>
				<view style="width:60%;height:90px;margin:10px;color:#333;">
					<view style="height:60px;overflow: hidden;">{{item.detail[0].goods_name}}</view>
					<view style="display: flex; flex-wrap: wrap;justify-content: space-between;">
						<text>实付：{{item.detail[0].price}}</text><text>x{{item.total_num}}</text>
					</view>
				</view>
			</view>
			<view style="border-bottom:1rpx solid #ccc;height:10px;"></view>
			<view style="width:100%;padding-top:15px;display: flex;flex-wrap: wrap;justify-content: space-between;">
				<view style="width:70%;display: flex;flex-wrap:wrap;color:#999;">
				   <text>游戏大区：{{item.play_region}}</text>
				</view>
				<button class="btnn" @tap="toDetail(item.id)">订单查看</button>
			</view>
		</view>
		<view v-if="isLoading">加载中...</view>
		<view style="text-align:center" v-if="noMore">~~亲，见底了~~</view>
	</view>
</template>

<style>
	page {
		background-color: #f6f6f6;
	}
	.btnn {
		background-color:#f00;
		width:90px;
		color:#ffffff;
		font-size:14px;
		height:25px;
		line-height: 25px;
		border-radius: 20px;
		margin:0px;
	}
</style>